<template>
	<view class="goods-list">
			<my-goods v-for="goods in goodsList" :key="goods.goods_id" :goods="goods" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [],
				total: 0,			
				queryObj: {
					query: "",
					cid: "",
					pagenum: 1,
					pagesize: 10
				},
				// 该字段用来判断是否正在请求数据，作为节流阀的阀门
				isLoading: false
			}
		},
		methods: {
			async getGoodsList() {
				// 开启节流阀，避免在网络差的情况下，可以在网络请求没有返回时，多次进行下拉触底的操作。
				this.isLoading=true;
				// 这里需要携带参数 this.queryObj
				let {data: res}=await uni.$http.get("/goods/search",this.queryObj);
				if(res.meta.status!==200) return uni.$showMsg();
				// 将请求过来的数据与原数据进行拼接
				this.goodsList=[...this.goodsList,...res.message.goods];
				this.total=res.message.total;
				this.isLoading=false;
			}
		},
		onLoad(options) {
			this.queryObj.query=options.query || "";
			this.queryObj.cid=options.cid || "";
			this.getGoodsList();
		},
		onReachBottom() {
			// 判断数据是否加载完毕
			if(this.queryObj.pagenum*this.queryObj.pagesize>=this.total) return uni.showToast({
				title: "数据加载完毕!",
				icon: "none"				
			})
			if(this.isLoading) return ;
			this.queryObj.pagenum ++;
			this.getGoodsList();
		},
		onPullDownRefresh() {
			this.goodsList=[];
			this.total=0;
			this.queryObj.pagenum=1;
			this.isLoading=false;
			this.getGoodsList();
			// 停止pullDownRefresh动画
			uni.stopPullDownRefresh();
		}
	}
</script>

<style lang="scss">

</style>
